<template>
        <div class="w-100 h-100 d-flex"  >
            <div v-for="(item, index) in list" :key="index"
             :style="{ backgroundImage: 'url(' + item.img + ')' }"
             class="background-div">
            <div style="width: 100%;height: 70%;text-align: center;font-size: 40px;line-height: 300px;">{{ data[index] }}</div>
            <div style="text-align: center;font-size: 20px;font-family: 'OPPOSans-Regular';">{{ item.name }}</div>

        </div>
            
        </div>
        
</template>
    
<script setup lang='ts'>
    import img1 from '@/assets/image/underGround/p_bk01.png';
    import img2 from '@/assets/image/underGround/p_bk02.png';
    import img3 from '@/assets/image/underGround/p_bk03.png';

    const data=ref([10,21,34])
    const  list =ref([
        {
            name:'正在处理',
            img:img1,
        },
        {
            name:'已处理',
            img:img2,
        },
        {
            name:'待处理',
            img:img3,
        },
    ])
</script>
    
<style>
     .background-div {
        width: 100%; /* 或者其他所需宽度 */
        height: 100%; /* 为了看到背景图，需要设置一个高度 */
        background-position: center; /* 背景图片居中显示 */
        background-repeat: no-repeat; /* 背景图片不重复 */
    }
</style>